<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div  class="manage" >
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="50%">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px" :inline="true" >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker
             type="date" placeholder="选择出生日期"
             v-model="form.birth" 
             style="width: 100%;" 
             value-format="yyyy-MM-DD">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="地址" prop="addr">
            <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"  >
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary"  @click="submit " >确 定</el-button>
        </span>
      </el-dialog>
      <div class="manage-header" style="display:flex;justify-content: space-between;" >
        <el-button type="primary" @click="handleAdd">+ 新建</el-button>
        <el-form :model="userForm" :inline="true">
          <el-form-item>
            <el-input v-model="userForm.name" placeholder="请输入要查找的用户姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查找</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="common-table">
        <el-table
        stripe="true"
          height="600"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="180">
            <template slot-scope="scope">
              <span>{{scope.row.sex==1?'男':'女'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄">
          </el-table-column>
          <el-table-column
            prop="birth"
            label="出生日期">
          </el-table-column>
          <el-table-column
            prop="addr"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="addr"
            label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handelEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pager">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="handlePage">
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import {addUser, deleteUser, editUser, getUser} from '../../api'
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:'user',
     data(){
        return{
          dialogVisible: false,
          form:{
            name:'',
            age:'',
            sex:'',
            birth:'',
            addr:''

          },
          rules:{
            name:[
              {
                required:true,message:'请输入姓名'
              }
            ],
            age:[
              {
                required:true,message:'请输入年龄'
              }
            ],
            sex:[
              {
                required:true,message:'请输入性别'
              }
            ],
            birth:[
              {
                required:true,message:'选择出生日期'
              }
            ],
            addr:[
              {
                required:true,message:'请输入地址'
              }
            ]
          },
          tableData:[],
          modeTepe:0,//0代表新增 1代表编辑
          total:0 ,   //数据的条数
          pageData:{  //分页参数
            page:1,
            limit:10
          },
          userForm:{
            name:""
          }

        }
     
      },
     methods: {
       //提交用户表单·
       submit(){
        this.$refs.form.validate((valid)=>{
          // console.log(valid)
          if(valid)
          {
            if(this.modeTepe===0)
            {
              addUser(this.form).then(()=>{
                  this.getUserList()
              })
            }else{
              editUser(this.form).then(()=>{
                this.getUserList()
              })
            }
          console.log(this.form,'form')
          console.log(this)
          // this.$refs.form.resetFileds()
          this.handleClose()
          this.dialogVisible = false     
          }
        })
       },
       //弹窗关闭
       handleClose(){
        this.$refs['form'].resetFields()              
          this.dialogVisible = false
       },
       handleAdd(){
        this.dialogVisible = true
        this.modeTepe=0
       },
       cancel(){
        this.handleClose()
       },
       handelEdit(row){
          this.modeTepe=1
          this.dialogVisible=true
          this.form=JSON.parse(JSON.stringify(row))
       },
       handleDelete(row){
          console.log(row.id)  
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              deleteUser({id:row.id}).then(()=>{
              this.$message({
              type: 'success',
              message: '删除成功!'
              });
              this.getUserList()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });
       },
       getUserList(){
        getUser({params:{...this.userForm,...this.pageData}}).then(({data})=>{
        console.log(data)
        this.tableData=data.data.list
        this.total=data.data.count||0
        })
       },
       handlePage(val){
        console.log(val,'val')
        this.pageData.page=val
        this.getUserList()
       },
       onSubmit(){
        this.getUserList()
       }
    },
    mounted(){
      this.getUserList()
    }
  
  }
  </script>


<style lang="less" scoped>
.manage{
  position: relative;
  height:90%;
  .manage-header{

  }
  .common-table{
    height: calc(100%-62px);
      .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
      }
  }
  
}
</style>le